<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* div {
        /* 给父亲添加flex属性 */
    /* display: flex; */
    /* justify-content: center; */
    /*主轴居中对齐*/
    /* align-items: center; */
    /*侧轴居中对齐*/

    /* flex-direction: column;
        flex-wrap: wrap; */
    /* flex-flow: row wrap;
        /*换行*/
    /* align-content: space-around;
        width: 80%;
        height: 300px;
        background-color: pink;

    } */
    div span {
        width: 150px;
        height: 100px;

        background-color: purple;
        margin-right: 5px;

    }

    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;

    }

    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
    }

    section div:nth-child(2) {
        flex: 1;
        background-color: rgb(67, 154, 105);
    }

    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: rgb(55, 51, 118);
    }

    p {
        display: flex;

        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;
        margin-top: 10px;
    }

    p span:nth-child(1) {
        flex: 2;
        background-color: purple;
    }

    p span:nth-child(2) {
        flex: 1;
    }

    p span:nth-child(3) {

        flex: 1;
        align-self: flex-end;
    }
</style>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>


    </div>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <p>
        <span>1</span><span>2</span><span>3</span>
    </p>
    <script>
        //flex 弹性布局 移动端应用广泛
        //当父元素设置为flex布局后 float/clear/vertical-align 属性将失效
        //通过给父盒子 添加flex属性 来控制子盒子的位置和排列方式
        // --------------------------------------------------
        //                     对父元素设置
        //flex-direction 设置主轴方向(默认主轴是X轴)  row(从左到右) column(从上到下)
        //justify-content 设置主轴上的子元素排列方式 flex-end(从尾部开始排列) center(居中对齐) space-around(平均分配剩余空间) space-between(先两边贴边 在平均分配空间)
        //flex-wrap 设置子元素换行(默认是不换行的,会缩小子元素的宽度)

        //align-items(单行) 设置侧轴子元素的排列方式  center(居中) strech(拉伸)
        //align-content(多行) 设置侧轴子元素的排列方式(多行) space-around space-between
        //flex-flow  相当于对是否换行和主轴方向进行简写
        //-------------------------------------------------------------
        //                        对子元素设置
        //flex      定义子元素所占的空间(默认是0)
        
        //align-self 控制单个子元素 主侧轴的排列
    </script>
</body>

</html>